var userSelf={}
var toOneId
$(function(){
	$('#myModal').modal({
		keyboard: false,
		backdrop:false
	})
	//用户注册
	$('#btn-setName').click(()=>{
		var name=$('#username').val()
		if(checkUser(name)){
			$('#username').val('')
			alert('用户名不能为空或重复')
		}else{
			var imgList=["/images/1.jpg","/images/2.jpg","/images/3.jpg","/images/4.jpg","/images/5.jpg"]
			var random=Math.floor(Math.random()*5)
			var img=imgList[random]
			var dataObj={
				name:name,
				img:img
			}
			socket.emit('login',dataObj)
			$('#myModal').modal('hide')
			$('#username').val('')
			$('#msg').focus()
		}
	});
	//群发信息，将内容发送给server端
  	$('#sendMsg').click(function(){
  		var msg=$.trim($('#msg').val())
  		if(!msg){
  			alert('内容不能为空!')
  			return
  		}
  		var from=userSelf
  		var msgObj={
  			from:from,
  			msg:msg
  		}
  		socket.emit('toAll',msgObj)
  		addMsgFromUser(msgObj,true)
  		$('#msg').val('')
  	})
  	//发送图片
	$('#sendImage').change(function(){
		if(this.files.length!=0){
			var file=this.files[0]
			var reader=new FileReader()
			if(!reader){
				alert('你的浏览器太旧了')
				return
			}
			//图片读取完毕后向服务端发送图片消息
			reader.onload=function(e){
				var msgObj={
					from:userSelf,
					img:e.target.result
				}
				socket.emit('sendImageToALL',msgObj)
				addImgFromUser(msgObj,true)
			}
			reader.readAsDataURL(file)
		}
	})
  	//单发模态框点击发送按纽
	$('#btn_toOne').click(()=>{
		var msg=$.trim($('#input_msgToOne').val())
		if(!msg){
			alert('不能为空！')
			return
		}
		var msgObj={
			from:userSelf,
			to:toOneId,
			msg:msg
		}
		socket.emit('toOne',msgObj)
		$('#setMsgToOne').modal('hide')
		$('#input_msgToOne').val('')
	});
})
//遍历用户列表，查看是否有重名的
function checkUser(name){
	var haveName=false
	$(".user-content").children('ul').children('li').each(function(){
		var userName=$(this).find('span').text()
		if(name==userName){
			haveName=true
		}
	})
	if(!$.trim(name)){
		haveName=true
	}
	return haveName 
}
//把信息整理成dom，原生dom处理一点都不好，还不如mvvm的动态渲染
function addMsgFromUser(msgObj,isSelf){
	var msgType = isSelf?"message-reply":"message-receive";
	var msgHtml = $('<div><div class="message-info"><div class="user-info"><img src="/images/1.jpg" class="user-avatar img-thumbnail"></div><div class="message-content-box"><div class="arrow"></div><div class="message-content">test</div></div></div></div>');
	msgHtml.addClass(msgType);
	msgHtml.children('.message-info').children('.user-info').children('.user-avatar').attr('src',msgObj.from.img);
	msgHtml.children('.message-info').children('.user-info').children('.user-avatar').attr('title',msgObj.from.name);
	msgHtml.children('.message-info').children('.message-content-box').children('.message-content').text(msgObj.msg);
	$('.msg-content').append(msgHtml);
	//滚动条一直在最底
	$(".msg-content").scrollTop($(".msg-content")[0].scrollHeight);
}
//add message in UI
function addImgFromUser(msgObj,isSelf){
	var msgType = isSelf?"message-reply":"message-receive";
	var msgHtml = $('<div><div class="message-info"><div class="user-info"><img src="/images/1.jpg" class="user-avatar img-thumbnail"></div><div class="message-content-box"><div class="arrow"></div><div class="message-content">test</div></div></div></div>');
	msgHtml.addClass(msgType);
	msgHtml.children('.message-info').children('.user-info').children('.user-avatar').attr('src',msgObj.from.img);
	msgHtml.children('.message-info').children('.user-info').children('.user-avatar').attr('title',msgObj.from.name);
	msgHtml.children('.message-info').children('.message-content-box').children('.message-content').html("<img src='"+msgObj.img+"'>");
	$('.msg-content').append(msgHtml);
	//滚动条一直在最底
	$(".msg-content").scrollTop($(".msg-content")[0].scrollHeight);
}
//显示单发模态框
function showSetMsgToOne(name,id){
	$('#setMsgToOne').modal();
	$('#myModalLabel1').text("Send to "+name);
	toOneId = id;
}
//三个模态框的回车
//群发消息回车
function keywordsMsg(e){
	var event1 = e || window.event;
	if(event1.keyCode == 13){
		$('#sendMsg').click();
	}
}
//用户名回车
function keywordsName(e){
	var event1 = e || window.event;
	if(event1.keyCode == 13){
		$('#btn-setName').click();
	}
}
//单发消息回车
function keywordsName1(e){
	var event1 = e || window.event;
	if(event1.keyCode == 13){
		$('#btn_toOne').click();
	}
}